<template>
    <div>
        <Row :gutter="16">
                <Col span="12">
                         <Card>
                        <p slot="title">
                            <Icon type="ios-film-outline"></Icon>
                            经典电影
                        </p>
                        <a href="#" slot="extra" @click.prevent="changeLimit">
                            <Icon type="ios-loop-strong"></Icon>
                            换一换
                        </a>
                        <ul style="list-style-type: none;">
                            <li v-for="item in randomMovieList">
                                <Row>
                                    <Col :xs="16">
                                            <a :href="item.url" target="_blank">{{ item.name }}</a>
                                    </Col>

                                    <Col :xs="8">
                                        <span  style="color:red;">
                                            <Icon type="ios-star" v-for="n in 4" :key="n">
                                            </Icon>
                                            <Icon type="ios-star" v-if="item.rate >= 9.5"></Icon>
                                            <Icon type="ios-star-half" v-else></Icon>
                                            {{ item.rate }}
                                        </span>
                                    </Col>
                                </Row>
                            </li>
                        </ul>
                    </Card>
                </Col>

                <Col span="12">
                         <Card>
                        <p slot="title">
                            <Icon type="ios-film-outline"></Icon>
                            经典电影
                        </p>
                        <a href="#" slot="extra" @click.prevent="changeLimit">
                            <Icon type="ios-loop-strong"></Icon>
                            换一换
                        </a>
                        <ul style="list-style-type: none;">
                            <li v-for="item in randomMovieList">
                                <Row>
                                    <Col :xs="16">
                                            <a :href="item.url" target="_blank">{{ item.name }}</a>
                                    </Col>

                                    <Col :xs="8">
                                        <span  style="color:red;">
                                            <Icon type="ios-star" v-for="n in 4" :key="n">
                                            </Icon>
                                            <Icon type="ios-star" v-if="item.rate >= 9.5"></Icon>
                                            <Icon type="ios-star-half" v-else></Icon>
                                            {{ item.rate }}
                                        </span>
                                    </Col>
                                </Row>
                            </li>
                        </ul>
                    </Card>
                
                </Col>

        </Row>
          <Row :gutter="24"  class="bg">
            <Col :xs="1" :sm="4" :md="4" :lg="8" style="background-color: yellow;">Col2</Col>
            <Col :xs="20" :sm="16" :md="12" :lg="8"  style="background-color: silver;">Col90</Col>
            <Col :xs="3" :sm="4" :md="8" :lg="8" style="background-color: sienna;">Col2</Col>
        </Row>


        <br/> <br/>
        <Row>
            <Col span="8">
                <Menu :theme="theme2">
                    <Submenu name="1">
                        <template slot="title">
                            <Icon type="ios-paper" />
                            内容管理
                        </template>
                        <MenuItem name="1-1">文章管理</MenuItem>
                        <MenuItem name="1-2">评论管理</MenuItem>
                        <MenuItem name="1-3">举报管理</MenuItem>
                    </Submenu>
                    <Submenu name="2">
                        <template slot="title">
                            <Icon type="ios-people" />
                            用户管理
                        </template>
                        <MenuItem name="2-1">新增用户</MenuItem>
                        <MenuItem name="2-2">活跃用户</MenuItem>
                    </Submenu>
                    <Submenu name="3">
                        <template slot="title">
                            <Icon type="ios-stats" />
                            统计分析
                        </template>
                        <MenuGroup title="使用">
                            <MenuItem name="3-1">新增和启动</MenuItem>
                            <MenuItem name="3-2">活跃分析</MenuItem>
                            <MenuItem name="3-3">时段分析</MenuItem>
                        </MenuGroup>
                        <MenuGroup title="留存">
                            <MenuItem name="3-4">用户留存</MenuItem>
                            <MenuItem name="3-5">流失用户</MenuItem>
                        </MenuGroup>
                    </Submenu>
                </Menu>
            </Col>
            <Col span="8">
                <Menu :theme="theme2" active-name="1-2" :open-names="['1']">
                    <Submenu name="1">
                        <template slot="title">
                            <Icon type="ios-paper" />
                            内容管理
                        </template>
                        <MenuItem name="1-1">文章管理</MenuItem>
                        <MenuItem name="1-2">评论管理</MenuItem>
                        <MenuItem name="1-3">举报管理</MenuItem>
                    </Submenu>
                    <Submenu name="2">
                        <template slot="title">
                            <Icon type="ios-people" />
                            用户管理
                        </template>
                        <MenuItem name="2-1">新增用户</MenuItem>
                        <MenuItem name="2-2">活跃用户</MenuItem>
                    </Submenu>
                    <Submenu name="3">
                        <template slot="title">
                            <Icon type="ios-stats" />
                            统计分析
                        </template>
                        <MenuGroup title="使用">
                            <MenuItem name="3-1">新增和启动</MenuItem>
                            <MenuItem name="3-2">活跃分析</MenuItem>
                            <MenuItem name="3-3">时段分析</MenuItem>
                        </MenuGroup>
                        <MenuGroup title="留存">
                            <MenuItem name="3-4">用户留存</MenuItem>
                            <MenuItem name="3-5">流失用户</MenuItem>
                        </MenuGroup>
                    </Submenu>
                </Menu>
            </Col>
            <Col span="8">
                <Menu :theme="theme2" :open-names="['2']" accordion>
                    <Submenu name="1">
                        <template slot="title">
                            <Icon type="ios-paper" />
                            内容管理
                        </template>
                        <MenuItem name="1-1">文章管理</MenuItem>
                        <MenuItem name="1-2">评论管理</MenuItem>
                        <MenuItem name="1-3">举报管理</MenuItem>
                    </Submenu>
                    <Submenu name="2">
                        <template slot="title">
                            <Icon type="ios-people" />
                            用户管理
                        </template>
                         <Submenu name="2-1-1">
                                    <template slot="title"><Icon type="ios-paper" />内容管理</template>
                                    <MenuItem name="2-1-1-1"><Icon type="ios-stats" />文章管理2</MenuItem>
                                    <MenuItem name="2-1-1-2"><Icon type="ios-stats" />评论管理2</MenuItem>
                                    <MenuItem name="2-1-1-3"><Icon type="ios-stats" />举报管理2</MenuItem>
                                </Submenu>
                        <MenuItem name="2-2">
                            <Icon type="ios-paper" />
                            活跃用户</MenuItem>
                    </Submenu>
                    <Submenu name="3">
                        <template slot="title">
                            <Icon type="ios-stats" />
                            统计分析
                        </template>
                        <MenuGroup title="使用">
                            <MenuItem name="3-1">新增和启动</MenuItem>
                            <MenuItem name="3-2">活跃分析</MenuItem>
                            <MenuItem name="3-3">时段分析</MenuItem>
                        </MenuGroup>
                        <MenuGroup title="留存">
                            <MenuItem name="3-4">用户留存</MenuItem>
                            <MenuItem name="3-5">流失用户</MenuItem>
                        </MenuGroup>
                    </Submenu>
                </Menu>
            </Col>
        </Row>
        <br>
        <p>Change theme</p>
        <RadioGroup v-model="theme2">
            <Radio label="light"></Radio>
            <Radio label="dark"></Radio>
        </RadioGroup>


    <br/><br/><br/>
        <Row>
            <Col>
                <Menu mode="horizontal" :theme="theme1" active-name="1">
                    <MenuItem name="1">
                        <Icon type="ios-paper" />
                        内容管理
                    </MenuItem>
                    <MenuItem name="2">
                        <Icon type="ios-people" />
                        用户管理
                    </MenuItem>
                    <Submenu name="3">
                        <template slot="title">
                            <Icon type="ios-stats" />
                            统计分析
                        </template>
                        <MenuGroup title="使用">
                            <MenuItem name="3-1">新增和启动</MenuItem>
                            <MenuItem name="3-2">活跃分析</MenuItem>
                            <MenuItem name="3-3">时段分析</MenuItem>
                        </MenuGroup>
                        <MenuGroup title="留存">
                            <MenuItem name="3-4">用户留存</MenuItem>
                            <MenuItem name="3-5">流失用户</MenuItem>
                        </MenuGroup>
                    </Submenu>
                    <MenuItem name="4">
                        <Icon type="ios-construct" />
                        综合设置
                    </MenuItem>
                </Menu>
                <br>
                <p>Change theme</p>
                <RadioGroup v-model="theme1">
                    <Radio label="light"></Radio>
                    <Radio label="dark"></Radio>
                    <Radio label="primary"></Radio>
                </RadioGroup>
            </Col>
        </Row>
    </div>
      
</template>


<script>
export default {
  name: 'level_3_1',
     data() {
        return {
            movieList: [
                {
                    name: '肖申克的救赎',
                    url: 'https://movie.douban.com/subject/1292052/',
                    rate: 9.6
                },
                {
                    name: '这个杀手不太冷',
                    url: 'https://movie.douban.com/subject/1295644/',
                    rate: 9.4
                },
                {
                    name: '霸王别姬',
                    url: 'https://movie.douban.com/subject/1291546/',
                    rate: 9.5
                },
                {
                    name: '阿甘正传',
                    url: 'https://movie.douban.com/subject/1292720/',
                    rate: 9.4
                },
                {
                    name: '美丽人生',
                    url: 'https://movie.douban.com/subject/1292063/',
                    rate: 9.5
                },
                {
                    name: '千与千寻',
                    url: 'https://movie.douban.com/subject/1291561/',
                    rate: 9.2
                },
                {
                    name: '辛德勒的名单',
                    url: 'https://movie.douban.com/subject/1295124/',
                    rate: 9.4
                },
                {
                    name: '海上钢琴师',
                    url: 'https://movie.douban.com/subject/1292001/',
                    rate: 9.2
                },
                {
                    name: '机器人总动员',
                    url: 'https://movie.douban.com/subject/2131459/',
                    rate: 9.3
                },
                {
                    name: '盗梦空间',
                    url: 'https://movie.douban.com/subject/3541415/',
                    rate: 9.2
                }
            ],
            randomMovieList: [],
            theme2:'dark',
            theme1: 'light'
            
        }
    },
    methods: {
        changeLimit() {
            function getArrayItems(arr, num) {
                const temp_array = [];
                for (let index in arr) {
                    temp_array.push(arr[index]);
                }
                const return_array = [];
                for (let i = 0; i < num; i++) {
                    if (temp_array.length > 0) {
                        const arrIndex = Math.floor(Math.random() * temp_array.length);
                        return_array[i] = temp_array[arrIndex];
                        temp_array.splice(arrIndex, 1);
                    } else {
                        break;
                    }
                }
                return return_array;
            }
            this.randomMovieList = getArrayItems(this.movieList, 5);
        }
    },
    mounted() {
        this.changeLimit();
    }
}
</script>

<style lang="css" scoped>


.bg{
    height: 50px;
    margin-top: 30px;
    color: red;
    background-color: azure;
    font-size: 24px;
}
</style>

